<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>私教预约</title>
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" name="viewport">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/bosscoach.css">
	<link rel="stylesheet" href="css/flexible.css">
	<link rel="stylesheet" href="css/vant.css">
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/vue/vue.js"></script>
	<script src="js/vue/axios.js"></script>
	<script src="js/vue/vant.js"></script>
	<script src="js/jquery.md5.js"></script>
	<script src="js/vue/qs.js"></script>
	<script src="js/comment.js"></script>
	<script src="js/glabe.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="js/fontsize.js"></script>
</head>
<body>
	<div id="app">
		<template>
				<div class="group_details clearfix">
						<div class="fl">
							<img :src="dataList.info.Picurl" onerror="this.src='images/moren.png'" alt="" class="spinning_img">
						</div>
						<div class="spinning_txt fl" style="padding-top:0.05rem;">
							<p><span class="spinning_txx">{{dataList.info.Sname}}</span></p>
							<p><span class="muscle_fat">{{dataList.info.Title}}</span><span class="spinning_time">{{dataList.info.Chour}} min</span></p>
							<p><span class="degree_time">{{dataList.info.Date}}</span><span class="degree_week">{{dataList.info.Week}}</span></p>
						</div>
					</div>
					<div class="under_line"></div>
					<div class="booking_time">
						<ul class="clearfix">
							<template v-for="(item,key) in dataList.timelist">
								<template v-if="item.type == 0">
									<li :class="activeTime == key ? 'time_active' : ''" @click="timeActive(item,key)">{{item.stime}}</li>
								</template>
								<li class="time_desable" v-else>{{item.stime}}</li>
							</template>
						</ul>
					</div>
					<div class="member_card">
							<p  class="member_card_title">选择会员卡</p>
							<div v-if="dataList.cardlist.length>0">
								<div class="year_card_list clearfix" v-for="(item,key) in dataList.cardlist" @click="changeCard(key,item)">
									<div class="entrance_sign fl">
										<p class="entrance_sign_txt">{{item.Cardname}}</p>
										<p class="entrance_sign_date">{{item.Time}}</p>
										<p class="entrance_sign_in">入场签到计费<span>{{item.Account}}</span></p>
									</div>
									<div class="remaining_day fr">
										<div class="remaining_day_txt"><span>{{item.Surplus_str}}</span></div>
										<div style="margin-top: 0.18rem;text-align: center;">
											<img :src="key == active ? 'images/check_in.png' : 'images/check_not.png'" alt="" class="check_in">
										</div>
									</div>
								</div>
							</div>
							<div v-else style="text-align: center;margin-top: .3rem;color: #999999;font-size: .14rem;">
								暂无可预约的会员卡
							</div>
							<div v-if="dataList.cardlist.length>0" class="appointment_btn" @click="reserveBtn()">预约</div>
					</div>
		</template>
		<div class="technology">由馆家提供技术支持</div>
	</div>
	
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				//数据
				dataList:{},
				//卡选中
				active:null,
				//选中卡数据
				activeCardData:null,
				//时间段选中
				activeTime:null,
				//选中时间段数据
				activeTimeData:null,
				//上页传递的数据
				userObj:null
			},
			created() {
				var str = getUrlQueryString("str");
				let obj = JSON.parse(str);
				this.userObj = obj;
				//发送请求
				axios.post('/mobileapi/boss/curr.php?act=sj_yy_list',Qs.stringify(obj)).then(res=>{
					if(res.data.code == 200){
						console.log(res.data.data)
						this.dataList = res.data.data;
					}else{
						vant.Toast(res.data.msg);
					}
				}).catch(err=>{
					vant.Toast('请求发送失败，请重试')
				})
			},
			methods: {
				//选择会员卡
				changeCard(key,value){
					this.active = key;
					this.activeCardData = value;
				},
				//选择时间端
				timeActive(item,key){
					this.activeTime = key;
					this.activeTimeData = item;
				},
				//预约按钮
				reserveBtn(){
					//判断是否选择时间段
					if(this.activeTimeData == null){
						//请选择时间
						vant.Toast('请选择时间');
						return false;
					}
					//判断是否选择卡
					if(this.activeCardData == null){
						//请选择卡
						vant.Toast('请选择会员卡');
						return false
					}
					//整合数据
					let plan_id = this.userObj.plan_id;
					let key = this.userObj.key;
					let date = this.userObj.date;
					let stime = this.activeTimeData.stime;
					let etime = this.activeTimeData.etime;
					let pstime = this.dataList.info.Stime;
					let petime = this.dataList.info.Etime;
					let cid = this.activeCardData.id;
					let csid = this.activeCardData.Csid;
					let uid = this.userObj.uid;
					let from = JSON.stringify({
						plan_id,
						key,
						date,
						stime,
						etime,
						pstime,
						petime,
						cid,
						csid,
						uid
					});
					let sign = md5(from);
					let params = {
						from,
						sign
					}
					axios.post('/mobileapi/boss/curr.php?act=sj_yy',Qs.stringify(params)).then(res=>{
						if(res.data.code == 200){
							console.log(res);
							vant.Toast(res.data.msg);
							setTimeout(()=>{
								history.go(-2);
							},1500);
						}else{
							vant.Toast(res.data.msg);
						}
					}).catch(err=>{
						vant.Toast('请求发送失败，请重试')
					})
				}
			}
		})
	</script>
</body>
</html>